import { $ } from '../js/jquery-module.js';
$(function() {
    $('header').load('./header_module-1.html');
    $('footer').load('./floor_module-1.html');
    $('.tabs').children().first().click(function() {
        $('.tabs').children().last().css('backgroundColor', 'rgba(0, 0, 0, 0)');
        $('.tabs').children().first().css('backgroundColor', 'rgba(0, 0, 0, .05)');
        $('.phone').html(`<span>+86(中国)<i></i></span> 
                <input type = "tel" name = "user_tel" placeholder="请输入手机号" >`);
        $('.phone-code').children('input').attr('placeholder', '邮箱验证码');
        $('form>span').text('');
        phoneEmail();
    })
    $('.tabs').children().last().click(function() {
        $('.tabs').children().first().css('backgroundColor', 'rgba(0, 0, 0, 0)');
        $('.tabs').children().last().css('backgroundColor', 'rgba(0, 0, 0, .05)');
        $('.e-mail').html(`<input type = "email" name = "user-email" placeholder="邮箱地址" style="width:100%; padding:0 16px;" >`);
        $('.phone-code').children('input').attr('placeholder', '短信验证码');
        $('form>span').text('');
        phoneEmail();
    })
    let user_name = '';

    let
        reg1 = [/^.{8,}$/, /[A-Z]+/, /[a-z]+/, /[0-9]+/],
        reg2 = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
        reg3 = /^[A-Za-z0-9]{4,11}@[a-z0-9]{1,5}\.(([a-z]{1,5})|([a-z]{1,3}\.[a-z]{1,2}))$/;
    let resultReg, pwLength, num, year_count = '',
        month_count = '',
        day_count = '',
        user_year, user_month;
    /*随机生成用户名*/
    let _id = Math.floor(Math.random() * 7),
        uname = [],
        _id1;
    for (let i = 1; i <= 2; i++) {
        uname.push(String.fromCharCode(Math.floor(Math.random() * 25 + 1) + 97));
    }
    for (let j = 1; j <= 2; j++) {
        _id1 = Math.floor(Math.random() * uname.length);
        uname.splice(_id1, 0, String.fromCharCode(Math.floor(Math.random() * 25 + 1) + 65));
    }
    for (let j = 1; j <= 3; j++) {
        _id1 = Math.floor(Math.random() * uname.length);
        uname.splice(_id1, 0, Math.floor(Math.random() * 10));
    }
    uname.splice(_id, 0, '_');
    uname = uname.join('');
    $('.user-password input').keyup(function() {
        $('.user-password input').val(`${$('.user-password input').val().replace(/\s/g, '')}`);
        resultReg = reg1.map(function(elm) {
            return elm.test($('.user-password input').val());
        })
        pwLength = resultReg.shift();
        num = resultReg.reduce(function(obj, i) {
            i && obj.count++;
            return obj;
        }, {
            count: 0
        });
        if ($('.user-password input').val()) {
            $('.user-password i').css('backgroundImage', 'url(../img/no-eye1.svg)');
            if (!pwLength) {
                $('.user-password').next().html('<i></i>至少包含8个字符')
            } else if ((!(resultReg[0] || resultReg[1])) || !resultReg[2]) {
                $('.user-password').next().html('<i></i>至少含字母和数字，空格自动忽略');
            } else {
                switch (num.count) {
                    case 1:
                        $('.user-password').next().html('弱');
                        break;
                    case 2:
                        $('.user-password').next().html('中');
                        break;
                    case 3:
                        $('.user-password').next().html('强');
                        break;
                }
            }
        } else {
            $('.user-password').next().html('');
            $('.user-password i').css('backgroundImage', 'url(../img/no-eye.svg)');
        }
    })
    eye($('.user-password i'), $('.user-password input'));
    $('.user-password input').focusout(function() {
        if ($('.reset-password input').val() != $('.user-password input').val() && $('.reset-password input').val() != '') {
            $('.reset-password').next().html('<i></i>密码与确认密码不一致');
        } else {
            $('.reset-password').next().html('');
        }
    })
    $('.reset-password input').focusout(function() {
        $('.reset-password input').val(`${$('.reset-password input').val().replace(/\s/g, '')}`);
        if ($('.reset-password input').val() != $('.user-password input').val() && $('.reset-password input').val() != '') {
            $('.reset-password i').css('backgroundImage', 'url(../img/no-eye1.svg)');
            $('.reset-password').next().html('<i></i>密码与确认密码不一致');
        } else {
            $('.reset-password').next().html('');
            $('.reset-password i').css('backgroundImage', 'url(../img/no-eye.svg)');
        }
    });
    eye($('.reset-password i'), $('.reset-password input'));
    phoneEmail();
    /*密码可视、不可视*/
    function eye(_this, _this1) {
        _this.click(function() {
            setTimeout(function() {
                if (_this.css('backgroundImage') == 'url("http://localhost/lqf/www.huawei.com/src/img/no-eye1.svg")') {
                    _this.css('backgroundImage', 'url(../img/eye.svg)');
                    _this1.attr('type', 'text');
                } else {
                    _this.css('backgroundImage', 'url(../img/no-eye1.svg)');
                    _this1.attr('type', 'password');
                }
            })


        })
    }


    /*出生年份初始化*/
    for (let i = 2021; i >= 1900; i--) {
        year_count += `<li>${i}</li>`;
    }
    $('.user-year ul').append(year_count);
    $('.birth-date div span').click(function() {
            $(this).children('ul').css('display', 'block');
            $('.birth-date div span').not($(this)).children('ul').css('display', 'none');
        })
        /*出生月份初始化*/
    for (let i = 1; i <= 12; i++) {
        month_count += `<li>${i}</li>`;
    }
    $('.user-month ul').append(month_count);
    /* 出生日初始化*/
    userDay();

    function userDay() {
        day_count = '';
        $('.day-list').html('');
        user_year = parseInt($('.user-year em').text());
        user_month = parseInt($('.user-month em').text());
        if (user_year % 4 == 0 && user_year % 100 != 0 || user_year % 400 == 0 && user_month == 2) {
            for (let i = 1; i <= 28; i++) {
                day_count += `<li>${i}</li>`;
            }
            $('.day-list').append(day_count);
            if ($('.user-day em').text() >= '28') $('.user-day em').text('1');
        } else if (user_month == 2) {
            for (let i = 1; i <= 29; i++) {
                day_count += `<li>${i}</li>`;
            }
            $('.user-day ul').append(day_count);
            if ($('.user-day em').text() >= '29') $('.user-day em').text('1');
        } else if (user_month % 2 == 0) {
            for (let i = 1; i <= 30; i++) {
                day_count += `<li>${i}</li>`;
            }
            $('.day-list').append(day_count);
        } else {
            for (let i = 1; i <= 31; i++) {
                day_count += `<li>${i}</li>`;
            }
            $('.day-list').append(day_count);
        }
    }

    $('.birth-date li').click(function() {
        if ($(this).parent().parent().hasClass('user-year')) {
            $(this).parent().parent().find('em').text($(this).text());
            userDay();
            $(this).parent().css('display', 'none');
            console.log($(this).parent().css('display'))
        } else if ($(this).parent().parent().hasClass('user-month')) {

            $(this).parent().parent().find('em').text($(this).text());
            userDay();
        }

    })
    $('.day-list').children().click(function() {
        console.log($(this));
        $(this).parent().parent().find('em').text($(this).text());
    })

    function phoneEmail() {
        if ($('.phone input').attr('placeholder') == "请输入手机号") {
            $('.phone input').keyup(function() {
                dispose(reg2, this);
            });

        } else if ($('.phone input').attr('placeholder') == "邮箱地址") {
            $('.phone input').keyup(function() {
                dispose(reg3, this);
            });
        }
    }


    function dispose(elm, _this) {
        if (_this.value) {
            _this.value = _this.value.replace(/\s/g, '');
            let text = elm.test(_this.value) ? '' : '<i></i>格式不正确';
            $(_this).parent('.phone').next().html(text);
        } else {
            $(_this).parent('.phone').next().html('');
        }
    }
    $('.sign-in input').click(function() {
        if ($('.user-password input').val() == '' || $('.reset-password input').val() == '' || $('.phone input').val() == '' || $('.phone-code input').val() == '') {
            $('.sign-in').next().html('<i></i>请填写完成信息,再提交注册!');

        } else {
            let year = parseInt($('.user-year em').text()),
                month = parseInt($('.user-month em').text()),
                day = parseInt($('.user-day em').text()),
                cuntry = $('.country em').text(),
                userpw = $('.user-password input').val(),
                useremail, usertel;
            if ($('.phone input').attr('placeholder') == '请输入手机号') {
                usertel = $('.phone input').val();
                useremail = '';
            } else {
                useremail = $('.phone input').val();
                usertel = '';
            }

            let data = { year, month, day, cuntry, uname, usertel, useremail, userpw };
            $.get('../../interface/reg.php', data, function(res) {
                $('html').append(res);
            });

        }
        $("form").submit(function() {
            return false;
        });
    })

})